﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Перемещение групп объектов</title>
<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../lib/raphael-min.js"></script>
<script type="text/javascript">
	$(function(){
		var paper = new Raphael($("#paper1")[0]);
		
		var dice = paper.set();
		// rectangle with rounded edges
		dice.push(
			paper.rect(10, 10, 60, 60, 4).attr("fill", "#FFF"),
			paper.circle(22, 58, 5).attr("fill", "#000"),
			paper.circle(58, 22, 5).attr("fill", "#000"),
			paper.circle(40, 40, 5).attr("fill", "#000"),
			paper.circle(22, 22, 5).attr("fill", "#000"),
			paper.circle(58, 59, 5).attr("fill", "#000")
		);

		// сохраняем ссылку на множество в каждом из его элементов
		// метод data(), вызванный для множеста, применяется к каждому из его элементов
		dice.data("myset", dice);
		
		dice.drag(
			function(dx, dy, x, y, e) {//dragmove
				var myset = this.data("myset");
				myset.transform(this.data("mytransform")+'T'+dx+','+dy);
			},
			function(x, y, e) {//dragstart
				var myset = this.data("myset");
				myset.data("mytransform", this.transform());
			},
			function(e) {//dragend
				var myset = this.data("myset");
				myset.data("mytransform", this.transform());
			}
		);

	});
</script>
</head>
<body>
	<h1>Перемещение групп объектов</h1>
	<p>Источник: [1], стр. 38 "Dragging Sets"</p>
	<p>Указания: изображение игральной кости можно перетаскивать мышью.</p>
	<p>Особенности:</p>
	<ul>
		<li>привязка обработчиков событий не к отдельным объектам, а к множеству в целом</li>
		<li>сохранение ссылки на множество в данных (<span class="code">data()</span>) его элементов</li>
	</ul>

	<div id="paper1" class="paper" style="width:600px; height:400px;">
	</div>
	
	<h2>Литература</h2>
	<ol>
		<li>Wilson, C. RaphaelJS Graphics and Visualization on the Web. O'Relly, 2013 г.</li>
	</ol>
</body>
</hmtl>